<template>
  <div>
    <a-form :model="formState" ref="roleAirport">
      <a-form-item name="airportIds">
        <a-transfer :dataSource="airportListData" v-model="formState.airportIds" :listStyle="{ width: '45%', height: '880px' }" :titles="[' 可选机场', ' 已选机场']" :render="(item) => item.title" :target-keys="formState.airportIds" @change="handleTransferChange" filterable show-search></a-transfer>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" name="RoleAuth" setup>
import { reactive, ref } from 'vue';
import { airportList, querySetAirport, setAirport } from '../data/role.api';

const roleAirport = ref();
const airportListData = ref();
let roleId = ref();
const formState = reactive({
  airportIds: [],
});

/**
 * 设置数据
 * @param data
 */
async function setData(data) {
  roleId = data.record.roleId;
  console.info('roleId', roleId);
  let airportIds = await querySetAirport({
    roleId: roleId,
  });
  airportList({}).then((data) => {
    data.map((item) => {
      item.key = item.airportId;
      item.title = item.airportName;
    });
    airportListData.value = data;
    formState.airportIds = airportIds;
  });
}

/**
 * 穿梭框change
 * @param targetKeys
 * @param direction
 * @param moveKeys
 */
function handleTransferChange(targetKeys, direction, moveKeys) {
  formState.airportIds = targetKeys;
  console.info(formState.airportIds.join(','));
}

/**
 * 表单提交
 */
async function handleSubmit(callback) {
  roleAirport.value.validate().then(() => {
    setAirport({
      roleId: roleId,
      airportIds: formState.airportIds.join(','),
    });
    callback && callback();
  });
}

/**
 * 暴露给父组件调用的方法
 */
defineExpose({
  setData,
  handleSubmit,
});
</script>
<style scoped lang="less"></style>
